﻿@navbar-height: 28px;
@content-height: 567px;

.top-two-rounds-window{
	border: 1px solid #666;
	border-radius: 4px 4px 0px 0px;
	-webkit-box-shadow: 0px 0px 20px #444;
	box-shadow: 0px 0px 20px #444;
}
.four-rounds-window{
	border: 1px solid #666;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 20px #444;
	box-shadow: 0px 0px 20px #444;
}
.panel-background{
		background: #f1f1f1; /* Old browsers */
		background: -moz-linear-gradient(top, #f1f1f1 0%, #d5d5d5 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(99%,#d5d5d5)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* IE10+ */
		background: linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* W3C */
}
.title-bar-style{
		.panel-background;

		border: 1px solid #f1f3f4;
		border-bottom: 0px;
		border-radius: 4px 4px 0px 0px;		
		font-size: 12px;

		#title{
			overflow: hidden;
		}
		.page-title
		{
		    font-siez: 12px;
			float: left;
			margin-left: 10px;
			line-height: 24px;
			color: #888;
			font-weight: bold;
		}
		.func-panel{
			float: right;
			margin-top: -1px;
			margin-right: 12px;

			a{
				display: block;
				float: left;
			}

			.func-min{
				width: 25px; height: 17px;
				background: url(images/funcs.png) 0px 0px;
			}			
			.func-min:hover{
				background: url(images/funcs.png) 0px -17px;
			}

			.func-max{
				width: 25px; height: 17px;
				background: url(images/funcs.png) -93px 0px;
			}			
			.func-max:hover{
				background: url(images/funcs.png) -93px -17px;
			}

			.func-restore{
				width: 25px; height: 17px;
				background: url(images/funcs.png) -25px 0px;
			}			
			.func-restore:hover{
				background: url(images/funcs.png) -25px -17px;
			}

			.func-close{
				width: 43px; height: 17px;
				background: url(images/funcs.png) -50px 0px; /* close按钮 */
			}

			.func-close:hover{
				background: url(images/funcs.png) -50px -17px;
				-webkit-box-shadow: 0px 0px 15px #e16b55;
			}
		}
}

#fade
{
    background-color: transparent;
    bottom: 0;
    display: -webkit-box;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
}


/***********main begin*********************/
html.widget{
	overflow: hidden;
	-webkit-user-select: none;
}
body {
    font-family: "Microsoft YaHei", "微软雅黑";
}
ol, ul {
  list-style: none;
}
a img {
  border: none;
}
iframe{
	border: none;
}

body.window{
	position: absolute;
	overflow: hidden;

	>div{
		position: relative;
		background: #f1f1f1;
	}
}


#main{
	.four-rounds-window;
	
	top: 50px;	left: 300px;
	width: 354px; height: 680px;

	margin: 12px;

	#title-bar{
		.title-bar-style;		
		height: 80px;		
		.func-panel{
			width: 68px; height: 17px;
		}
	}

	#head{
		height: 55px;
		padding-top: 5px;

		#user-head{
			float: left;
			margin-left: 10px;
			width: 42px; height: 42px;
			border: 2px solid #8fbda1;
			border-radius: 4px;
			box-shadow: 0px 0px 1px #fff;	
			background: #f8f8f8;

			#img-head{
				margin: 1px;
				width:40px;  height:40px;
			}
		}

		#user-info {
			float: left;
			margin-left: 10px;
			margin-top: 3px;
			font-size: 12px;
			color: #52836c;

			#user-name{
				font-weight: bold;
				font-size: 14px;
			}
		}
	}

	#i-nav-bar{
		width: 354px; height: @navbar-height;
	}
	.i-content{
		width: 354px; height: @content-height;display:none;
	}

	#footer{
		height: 4px;
		border-radius: 0px 0px 4px 4px;

		.panel-background;
	}
	
	
}

#action-message
{   
	background: #fae794; /* Old browsers */
	background: -moz-linear-gradient(top, #fae794 0%, #feefae 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fae794), color-stop(99%,#feefae)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fae794 0%,#feefae 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fae794 0%,#feefae 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fae794 0%,#feefae 100%); /* IE10+ */
	background: linear-gradient(top, #fae794 0%,#feefae 100%); /* W3C */
	
	-webkit-box-shadow:1px 1px 5px #666;
	 
    position:  absolute;
    min-height:30px;
    z-index: 500;    
    display: none;
    
    padding: 6px;
   
    #txt-message
    {
       font-size:14px;
    }
}


#feeds{
	height: @content-height;
	li{
		cursor: default;
	}

	.feed-list
	{
	    .title 
	    {
	        color: #323232;
	        font-size: 16px;
	        .unread
	        {
	            font-weight: bold;
	        }
		    a {
			    text-decoration: none;
			    color: #323232;
		    }   	        
		    a:hover{
			    text-decoration: underline;
		    }		    
	    }
	    .title:hover
	    {
	        color: #666;
	    }	    
	    .body
	    {
	        color:#666;
	        font-size: 14px;
		    a {
			    text-decoration: none;
			    color: #666;
		    }   	     
		    a:hover{
			    text-decoration: underline;
		    }		       	        
	    }

	    .noti
	    {
	        background: #fefecc; /* Old browsers */
		    background: -moz-linear-gradient(top, #fefecc 0%, #fcf9a1 100%); /* FF3.6+ */
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefecc), color-stop(99%,#fcf9a1)); /* Chrome,Safari4+ */
		    background: -webkit-linear-gradient(top, #fefecc 0%,#fcf9a1 100%); /* Chrome10+,Safari5.1+ */
		    background: -o-linear-gradient(top, #fefecc 0%,#fcf9a1 100%); /* Opera11.10+ */
		    background: -ms-linear-gradient(top, #fefecc 0%,#fcf9a1 100%); /* IE10+ */
		    background: linear-gradient(top, #fefecc 0%,#fcf9a1 100%); /* W3C */
	    }
	    .is-read
	    {
	        font-weight: normal;
			color:#666;
	    }
	}
}

#nav-bar{
	height: @navbar-height;
}



#appfunc{

	.top-two-rounds-window;

	top: 0px;	left: 0px;
	width: 817px; height: 648px;	
	
	
    #title-bar{
	 	.title-bar-style;		
	 	height: 25px;		
	 	.func-panel{
	 		width: 93px; height: 17px;
	 	}
	}

	#i-app-page{
		width: 817px; height: 623px;
	}
}
#login
{
	.four-rounds-window;

    top: 50px; left: 300px;
    width: 480px; height: 325px;

    margin: 12px;

	#title-bar{
		.title-bar-style;		
		height: 80px;		
		.func-panel{
			width: 68px; height: 17px;
		}
	}

	#i-loginpanel{
		width: 476px;	height: 296px;	
		border: 1px solid #f1f3f4;
		border-bottom: 0px;
		border-top: 0px;
		
	}
}
#loginpanel{
	width: 476px;	height: 296px;
    padding-top: 40px;
	#fields{
		 text-align: center;
		 
		 input
		 {
		    margin-bottom: 10px;
		 }
	}
}

#loginpanel-waiting{
	width: 476px;	height: 296px;
   	text-align: center;
	float:inherit;
	margin-top:20px;
	#remind
	{
		margin-top: 50px;
	}
}


#notification 
{
	-webkit-user-select: none;
    .four-rounds-window;

	position: absolute;
    
	border-color: #aaa;
	-webkit-box-shadow:1px 1px 5px #666;
    box-shadow:1px 1px 5px #666;

    width: 322px;min-height: 134px;
	overflow: hidden;
	
	background: #fcfcfc; /* Old browsers */
	background: -moz-linear-gradient(top, #fefefe 0%, #f1f1f1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(99%,#f1f1f1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fefefe 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fefefe 0%,#f1f1f1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fefefe 0%,#f1f1f1 100%); /* IE10+ */
	background: linear-gradient(top, #fefefe 0%,#f1f1f1 100%); /* W3C */
	
	.title-bar
	{
	    height: 35px;
	    .noti-logo
	    {
	        width: 24px;
	        height: 24px;
	        background: url(images/noti-logo.png) no-repeat;
            display: block;
            float: left;
            margin-top: 6px;
            margin-left: 18px;
	    }	        
	    .title
	    {
	        float: left;
	        font-size: 12px;
	        margin: .6em 0em 0em .5em;
		    color: #888;
		    font-weight: bold;
		    line-height: 24px;
        }

        .noti-func-panel 
        {
            float:right;
			margin-top: 12px;
			margin-right: 12px;

			a {
				display: block;
				float: left;
				margin-left: 16px;
			}

			.func-setting{
				width: 10px; height: 10px;
				background: url(images/funcs.png) 0px -34px;
			}			
			.func-setting:hover{
				background: url(images/funcs.png) 0px -45px;
			}

			.func-close{
				width: 10px; height: 10px;
				background: url(images/funcs.png) -10px -34px;
			}			
			.func-close:hover{
				background: url(images/funcs.png) -10px -45px;
			}
        }
	}
	
	.content
	{   
	    margin: 0px 10px 5px 20px; 
	    width: 240px;   
	    .title
	    {
	        line-height: 1.8em;
	        font-size: 16px;
			font-weight: bold;
	        color: #333;
			a {
				color: #333;
				text-decoration: none;
			}
	    }
	    .body
	    {
	        margin: 5px 0px 25px 0px;
	        line-heigh: 1.5em;
	        font-size: 14px;
	        color: #666;
			a {
				color: #333;
				text-decoration: none;
			}
	    }
		.is-read {
			font-weight: normal;			
		}
	}
	.notification-icon
	{
	        width: 16px;
	        height: 44px;
	        background: url(images/noti-icon.png) no-repeat;
            display: block;
            float: right;
            margin: 10px 22px;
	}
    .page
    {
        width:80px; height: 12px;
        margin: 0px 25px 5px 0px; 
        display:block;
        float:right;
        overflow: hidden;
		position: absolute;
		left: 235px;
		bottom: 5px;
	   
		.func-prev{
			width: 7px; height: 11px;
			display: block;
			float: left;
			background: url(images/funcs.png) -20px -34px;
		}			
		.func-prev:hover{
			background: url(images/funcs.png) -20px -45px;
		}

		.func-next{
			width: 7px; height: 11px;
			display: block;
			float: left;
			background: url(images/funcs.png) -27px -34px;
		}			
		.func-next:hover{
			background: url(images/funcs.png) -27px -45px;
		}
		.page-count
		{
		    margin: -3px 1.2em 0 1.2em;
		    font-size: 12px;
		    color: #999;
		    display: block;
			float: left;
		}

    }
}


#apps
{
	background: #86b79f; /* Old browsers */
	background: -moz-linear-gradient(top, #65917b 0%, #92c8ae 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65917b), color-stop(99%,#92c8ae)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #65917b 0%,#92c8ae 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #65917b 0%,#92c8ae 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #65917b 0%,#92c8ae 100%); /* IE10+ */
	background: linear-gradient(top, #65917b 0%,#92c8ae 100%); /* W3C */

    left: 0; top: 0; right: 0; bottom: 0;
    position: fixed;
    
    
	a:link  
	{
		text-decoration: none
	}

	.apps-container {
        width: 68px;
        height: 100px;
        margin: 0px 7px 6px 7px;
        float: left;
        border-radius: 2px;
        -webkit-border-radius: 2px;        

        .app-icon 
        {
            width: 64px;
            height: 64px;
            padding: 2px;
        }
		.app-text
		{
			color: #fff;
			font-size: 12px;
			line-height: 14px;
			display: table-cell;
			width: 68px; height: 28px;
			text-align: center;
			vertical-align: middle;
		}
    }
    
    #app-set 
    {
		background: #86b79f; /* Old browsers */
		background: -moz-linear-gradient(top, #d9ddd8 0%, #e5e9e3 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9ddd8), color-stop(99%,#e5e9e3)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #d9ddd8 0%,#e5e9e3 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #d9ddd8 0%,#d9de5e9e3dd8 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #d9ddd8 0%,#e5e9e3 100%); /* IE10+ */
		background: linear-gradient(top, #d9ddd8 0%,#e5e9e3 100%); /* W3C */

        height: 104px;
		position: fixed;	
		left: 0; top: 0; right: 0;

		#arrow{
			height: 14px;
			position: fixed;
			left:0; right:0; top: 90px;
			background: url(images/app-arrow.png) no-repeat 40px;
		}


		#app-type{
			padding: 0;
			margin: 0px 12px;

			.apps-container{
				height: 82px;
				img{
					opacity: .3;
				}
				.app-text
				{
					width: 68px; height: 14px;
					color: #b0c4b9;
					text-shadow: #fff 1px 1px 1px;
				}
			}
			.apps-container.current{
				.app-text{
					color: #638f7a;
					font-weight: bold;
				}
				img{
					opacity: 1;
				}
			}
			.apps-container:hover{
				cursor: pointer;
				img{
					opacity: .5;
				}
			}
			.apps-container.current:hover{
				img{
					opacity: 1;
				}
			}


		}


    }
    
    ul#app-list{
		position: absolute;	
		top: 104px;
		padding: 0;
		margin: 10px 12px;
		.apps-container:hover{
			cursor: pointer;
			img{
				opacity: .7;
			}
		}

		.app-text{
			text-shadow: #444 0px 0px 8px;
		}
    }
}




/*  针对jquery mobile的css fix */
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-bar-b, .ui-bar-b input, .ui-bar-b select, .ui-bar-b textarea, .ui-bar-b button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-body-b, .ui-body-b input, .ui-body-b select, .ui-body-b textarea, .ui-body-b button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-bar-d, .ui-bar-d input, .ui-bar-d select, .ui-bar-d textarea, .ui-bar-d button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-body-d, .ui-body-d input, .ui-body-d select, .ui-body-d textarea, .ui-body-d button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-bar-d,.ui-bar-d input,.ui-bar-d select,.ui-bar-d textarea,.ui-bar-d button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-body-e,.ui-body-e input,.ui-body-e select,.ui-body-e textarea,.ui-body-e button {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
.ui-btn-down-e {
	font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti
}
